<template>
  <div class="backTop" @click="goTop" v-show="isShow">
    <i class="iconfont icon-icon-test"></i>
  </div>
</template>

<script>
export default {
  name: "backTop",
  components: {},
  props: {},
  data() {
    return {
      isShow: false
    };
  },
  watch: {},
  computed: {},
  methods: {
    goTop() {
      let timer = setInterval(() => {
        let curTop = window.pageYOffset;
        if (curTop > 0) {
          window.scrollTo(0, curTop - 20);
        } else {
          clearInterval(timer);
        }
      }, 1000 / 60);
      //   document.documentElement.scrollTop = 0;
    },
    myscroll() {
      let curTop = window.pageYOffset;
      if (curTop > window.innerHeight / 2) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    }
  },
  created() {},
  mounted() {
    window.addEventListener("scroll", this.myscroll);
  }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.backTop {
  width: vw(36);
  height: vw(36);
  line-height: vw(36);
  border: 1px solid #666;
  border-radius: 50%;
  position: fixed;
  bottom: 10%;
  right: vw(20);
  z-index: 5;
  text-align: center;
  background: rgba(255, 255, 255, 0.3);
  i {
    font-size: vw(30);
    color: #666;
  }
}
</style>